<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>kuangjia</title>
<!--左右分栏-->
 <style>
    .wrap{
        width:900px;
        margin:0 auto;
        position: relative;
        }
    #left{
        width:200px;
        height:500px;
        background: #ccffff;
        position: absolute;
        top:0;
        left:0;
	 }
	.cbl{
        display: block;
        width: 150px;
        height: auto;
        line-height: 50px;
		border-radius: 5px;
        text-align: center;
        border: 20px solid #ccc;
        text-decoration: none;
        color: white;
        background-color: #55585a;

		top: 50px;
        }
	 #right{
            height: 500px;
            background: #e7e7e7;
            margin-left:200px;
			border-radius: 5px;
		 
	 }
	 
    </style>
<!--标题css-->
<style>	
	nav{
		background-color:#E7E7E7;
	}
	
	.nav_t{
		width:550px;
		margin:0 auto;
	}
	
	.t_d{
    display: inline-block;
}
	
	.til{
    text-align: center;
    display: block;
    margin: 1px;
    padding: 10px 15px;
    color: white;
    font-size: 16px;
    text-decoration: none;
    border-radius: 5px;
    background-color: #5e9bb0;
    cursor: pointer;
}
	.down{
		width:120px;
		display:none;
		position:absolute;
		background-color:#f9f9f9;
		box-shadow:0px 8px 16px	0px rgba(0,0,0,2);}
	.down a{
		display:block;
		/*导航栏子选项超链接的显示方式*/
		padding:12px 16px;
		/*内边距*/
		text-decoration: none;
		/*隐藏超链接下划线*/
		color:black;
		/*更改为黑色文本*/}
	
	.down a:hover{
		background-color: #e7e7e7;}
	
	.t_d:hover.til{
		background-color: #417e7f;}
	
	.t_d:hover.down{
		/*折叠*/
		display: block;}
	
</style>
<style>

</style>
</head>

<body>
	<span></span>
	<nav>
		<div class="nav_t">
			<div class="t_d">
				<a class="til">标题</a>
				<div class="down">
					<a>内容1</a>
					<a>内容2</a>
				</div>
			</div>
		</div>
	</nav>
<a class="cbl" href="www.baidu.com">服务端列表</a>
<a class="cbl" href="www.baidu.com">测试点列表</a>
<a class="cbl" href="www.baidu.com">客户端状态</a>

<p class="warp" id="right">主机内容主机内容主机内容</p>
</body>
</html>
